import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Text,
  Switch,
  TouchableOpacity,
  Picker,
  Image
} from 'react-native'

import { connect } from 'react-redux'
import HeaderDefault from '../../components/header/HeaderDefault'
import { addTourInfusion } from '../../netServer/patrol'
import { dateTransform } from '../../utils/utils_date'
import Toast from 'react-native-simple-toast'
import Modal from '../../components/ModalBox'

class PatorlInfusionResult extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectOralMedic: null,
      drip_speed: '50--60', //滴速
      shift: false, //移位
      reaction: false, //输液反应
      smooth: true, //通畅情况
      swelling: false, //局部红肿以及红线
      exosmose: false, //外渗情况
      comfort: false //有无输液不舒适
    }
  }
  static navigationOptions = ({ navigation }) => ({
    header: (
      <HeaderDefault backBtnOnPress={navigation.goBack} title="输液巡视" />
    )
  })

  _renderItem = item => {
    let { start_time, bed_no, status, advList = [] } = item

    return (
      <View
        style={{
          width: screenWidth,
          backgroundColor: 'white',
          borderBottomColor: '#cfcfcf',
          borderBottomWidth: 1,
          flexDirection: 'row',
          alignItems: 'center'
        }}
      >
        <Text
          style={{
            color: 'blue',
            fontSize: 14,
            width: 70,
            textAlign: 'center'
          }}
        >
          {this._getTimeStr(start_time.replace(/-/g, '/'))}
        </Text>

        <View style={{ flex: 1 }}>
          {advList.map((value, index) => {
            return (
              <View key={index}>
                <Text style={{ lineHeight: 30 }}>{value.medName}</Text>
                <Text style={{ lineHeight: 30 }}>
                  {value.standard}/{value.use_unit}&nbsp;&nbsp;&nbsp;&nbsp;
                  {value.measure}
                </Text>
              </View>
            )
          })}
        </View>
        <View
          style={{
            width: 80,
            height: 80,
            paddingTop: 10,
            paddingBottom: 10,
            justifyContent: 'center',
            alignItems: 'center'
          }}
        >
          <Text style={{ lineHeight: 30, fontWeight: 'bold' }}>{bed_no}</Text>
          <Text style={{ lineHeight: 30, color: '#e30000' }}>{status}</Text>
        </View>
      </View>
    )
  }

  _getTimeStr(begingStr) {
    let t1 = begingStr
    if (!t1) return ''
    let dateBegin = new Date(t1)
    if (!dateBegin) return ''
    let dateEnd = new Date()
    let timeTotal = dateEnd.getTime() - dateBegin.getTime()

    //计算出相差天数
    var days = Math.floor(timeTotal / (24 * 3600 * 1000))

    //计算出小时数

    var leave1 = timeTotal % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
    var hours = Math.floor(leave1 / (3600 * 1000))
    //计算相差分钟数
    var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
    var minutes = Math.floor(leave2 / (60 * 1000))

    //计算相差秒数
    var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
    var seconds = Math.round(leave3 / 1000)

    if (days > 0) {
      // 3天0时45分56秒
      return days + '天' + hours + '时' + minutes + '分'
    } else {
      if (hours > 0) {
        // 3天0时45分56秒
        return hours + '时' + minutes + '分'
      } else {
        return minutes + '分'
      }
    }
  }

  _headerComponent() {
    return (
      <View
        style={{
          width: screenWidth,
          height: 30,
          paddingLeft: 10,
          paddingRight: 10,
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          borderBottomColor: '#cfcfcf',
          borderBottomWidth: 1
        }}
      >
        <Text>时间</Text>
        <Text>药品名</Text>
        <Text>床号/状态</Text>
      </View>
    )
  }

  _renderLineSection(titileStr, valueS, changeValue) {
    return (
      <View
        style={{
          width: screenWidth,
          height: 45,
          borderBottomColor: '#cfcfcf',
          borderBottomWidth: 1,
          flexDirection: 'row'
        }}
      >
        <View
          style={{
            width: 0.5 * screenWidth,
            height: 45,
            borderRightColor: '#cfcfcf',
            borderRightWidth: 1,
            paddingLeft: 10,
            justifyContent: 'center'
          }}
        >
          <Text>{titileStr}</Text>
        </View>
        <View
          style={{
            width: 0.5 * screenWidth,
            height: 45,
            borderRightColor: '#cfcfcf',
            borderRightWidth: 1,
            justifyContent: 'center',
            alignItems: 'center'
          }}
        >
          <Switch
            onValueChange={changeValue}
            style={{ marginBottom: 10, marginTop: 10 }}
            value={valueS}
          />
        </View>
      </View>
    )
  }

  _commitBtn = btnStr => {
    if (btnStr === '暂停') {
      return
    }
    let { task_id, patient_no } = this.props.navigation.state.params.taskInfo
    let params = new FormData()

    let { user_id } = this.props.user_info

    params.append('patient_no', patient_no)
    params.append('nurse_id', user_id)

    params.append('tour_task_id', task_id)
    params.append('tour_time', dateTransform(new Date(), 'yyyy-MM-dd hh:mm:ss'))
    params.append('situation', btnStr)
    params.append('drip_speed', this.state.drip_speed)
    params.append('shift', this.state.shift ? '是' : '否')
    params.append('smooth', this.state.smooth ? '是' : '否')
    params.append('swelling', this.state.swelling ? '是' : '否')
    params.append('exosmose', this.state.exosmose ? '是' : '否')
    params.append('comfort', this.state.comfort ? '是' : '否')
    params.append('reaction', this.state.reaction ? '是' : '否')

    addTourInfusion(params, resp => {
      let { code, data = [], msg } = resp

      if (code == '0') {
        Toast.showWithGravity(msg, 0.3, Toast.CENTER)
        this.props.navigation.state.params.callBack()
        this.props.navigation.goBack()
      } else {
        Toast.showWithGravity(msg, 0.3, Toast.CENTER)
      }
    })
  }

  _rederBtn = (btnColor, btnStr) => {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <TouchableOpacity
          onPress={() => {
            this._commitBtn(btnStr)
          }}
          style={{
            width: 60,
            height: 40,
            borderColor: btnColor,
            borderWidth: 1,
            borderRadius: 5,
            justifyContent: 'center',
            alignItems: 'center'
          }}
        >
          <Text style={{ color: btnColor }}>{btnStr}</Text>
        </TouchableOpacity>
      </View>
    )
  }

  _renderModalBox = () => {
    return (
      <Modal
        style={styles.modal3}
        position={'bottom'}
        backdropPressToClose={false}
        swipeToClose={false}
        ref={md => (this.myModel2 = md)}
      >
        <View style={{ flex: 1 }}>
          <View
            style={{
              width: screenWidth,
              height: 50,
              flexDirection: 'row-reverse',
              alignItems: 'center'
            }}
          >
            <TouchableOpacity
              onPress={() => {
                this.myModel2.close()
              }}
              style={{
                width: 50,
                height: 50,
                justifyContent: 'center',
                alignItems: 'center'
              }}
            >
              <Image
                style={{ width: 30, height: 30 }}
                source={require('./src/guanbi.png')}
              />
            </TouchableOpacity>
          </View>

          <Picker
            selectedValue={this.state.drip_speed}
            style={{ height: 150, width: screenWidth }}
            onValueChange={(itemValue, itemIndex) =>
              this.setState({ drip_speed: itemValue })
            }
          >
            <Picker.Item label="<50" value="<50" />
            <Picker.Item label="50--60" value="50--60" />
            <Picker.Item label="60--70" value="60--70" />
            <Picker.Item label=">70" value=">70" />
          </Picker>
        </View>
      </Modal>
    )
  }

  render() {
    return (
      <View style={styles.container}>
        {this._headerComponent()}
        {this._renderItem(this.props.navigation.state.params.taskInfo)}
        {this._renderLineSection(
          '有无液体外渗',
          this.state.exosmose,
          newValue => {
            this.setState({ exosmose: newValue })
          }
        )}
        {this._renderLineSection(
          '有无局部红肿及红线',
          this.state.swelling,
          newValue => {
            this.setState({ swelling: newValue })
          }
        )}
        {/* {this._renderLineSection(
          '滴速是否正确', //hulinhua
          this.state.drip_speed,
          newValue => {
            this.setState({ drip_speed: newValue })
          }
        )} */}

        <TouchableOpacity
          onPress={() => {
            this.myModel2.open()
          }}
          style={{
            width: screenWidth,
            height: 45,
            borderBottomColor: '#cfcfcf',
            borderBottomWidth: 1,
            flexDirection: 'row'
          }}
        >
          <View
            style={{
              width: 0.5 * screenWidth,
              height: 45,
              borderRightColor: '#cfcfcf',
              borderRightWidth: 1,
              paddingLeft: 10,
              justifyContent: 'center'
            }}
          >
            <Text>滴速</Text>
          </View>
          <View
            style={{
              width: 0.5 * screenWidth,
              height: 45,
              borderRightColor: '#cfcfcf',
              borderRightWidth: 1,
              justifyContent: 'center',
              alignItems: 'center'
            }}
          >
            <Text>{this.state.drip_speed}</Text>
          </View>
        </TouchableOpacity>
        {this._renderLineSection(
          '输入是否通畅',
          this.state.smooth,
          newValue => {
            this.setState({ smooth: newValue })
          }
        )}
        {this._renderLineSection(
          '有⽆输液反应',
          this.state.reaction,
          newValue => {
            this.setState({ reaction: newValue })
          }
        )}
        {this._renderLineSection(
          '针头有无脱出、移位',
          this.state.shift,
          newValue => {
            this.setState({ shift: newValue })
          }
        )}
        {this._renderLineSection(
          '有无输液不适感',
          this.state.comfort,
          newValue => {
            this.setState({ comfort: newValue })
          }
        )}

        <View style={{ height: 20 }} />
        <View style={{ width: screenWidth, height: 60, flexDirection: 'row' }}>
          {this._rederBtn('#e94b36', '异常')}
          {this._rederBtn('gray', '暂停')}
          {this._rederBtn('#1afa29', '正常')}
          {this._rederBtn('#1296db', '结束')}
        </View>
        {this._renderModalBox()}
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white'
  },
  modal3: {
    height: 250,
    width: screenWidth
    // justifyContent: 'center',
    // alignItems: 'center'
  }
})

function select(store) {
  return { user_info: store.userInfo.user_info }
}

export default connect(select)(PatorlInfusionResult)
